<template>
  <div>
    <el-button @click="openDepart" :disabled="props.disabled">{{ props.label || '选择员工' }}</el-button>
    <el-tooltip v-if="!!props.tips" :content="props.tips" placement="top">
      <el-icon style="font-size: 20px;color: #ccc;padding-left: 6px;vertical-align: middle;"><QuestionFilled /></el-icon>
    </el-tooltip>
  </div>
  <el-tag v-for="(item, index) in creators" :key="item.name" type="warning" class="staffs_item" @close="handleClose(item, index)" :type="item.id" :closable="!props.disabled">
    {{ item.name }}
  </el-tag>
  <ZWDepart ref="DepartRef" @submit="getDepart" type="1" />
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, nextTick } from 'vue'
  import ZWDepart from '@/components/ZWDepart.vue'

  import { getSetionId } from '@/utils/utils'

  type ids = {
    id?: number
    name?: string
  }

  type Props = {
    modelValue: any[]
    creators: any[]
    label?: string
    multiple?: boolean
    disabled?: boolean,
    limit?: string,
    tips?: string,
    disabledList?: any[]
  }

  const props = defineProps<Props>()

  const emit = defineEmits(['close', 'change', 'update:modelValue'])
  const updateValue = (ids: any): void => {
    emit('update:modelValue', ids)
  }

  const DepartRef = ref<HTMLElement | null>(null)
  const creators = ref([])
  const openDepart = () => {
    DepartRef.value.multiple = props.multiple
    props.limit && (DepartRef.value.limit = props.limit)
    DepartRef.value.departVisble = true
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    creators.value = res
    const ids = getSetionId('id', creators.value)
    updateValue(ids)
    DepartRef.value.departVisble = false
    emit('change', ids, creators.value)
  }

  watch(
    () => props.creators,
    (val) => {
      creators.value = []
      if (val?.length) {
        creators.value = val
        const ids = getSetionId('id', val)
        updateValue(ids)
        nextTick(() => {
          DepartRef.value.departVisble = false
          DepartRef.value.selectedMember = val
        })
      } else {
        updateValue([])
        nextTick(() => {
          DepartRef.value.selectedMember = []
        })
      }
    },
    { deep: true, immediate: true }
  )

  watch(
    () => props.disabledList,
    (val) => {
      nextTick(()=>{
        DepartRef.value.disabledList.splice(0)
        if(val?.length){
          DepartRef.value.disabledList.push(...val)
        }
      })
    },
    { deep: true, immediate: true }
  )

  // 员工移除
  const handleClose = (item: any, index: number) => {
    creators.value.splice(index, 1)
    const ids = getSetionId('id', creators.value)
    updateValue(ids)
    DepartRef.value.removeItem(item)
    emit('change')
  }
</script>
<style scoped lang="scss">
  .staffs_item {
    margin-right: 6px;
    background: #fffaf9;
    border-radius: 2px;
    border: 1px solid #ffc69e;
    color: #ff6b00;
  }
   .el-tag__close {
    color: #ff6b00;
    :deep(.icon) {
      color: #ff6b00;
    }
  }
</style>
